import React, { useRef, useState } from "react";
import _ from 'lodash';
import { Form, Space, Button, DatePicker } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import Banned from "@/views/users/component/Banned";
import { getDateTime3 } from '@/utils/getDate'
import { apiGetUserList, apiGetUserRemove } from '@/request/report'
import "@/views/users/style/style.less";

const { RangePicker } = DatePicker;

const SearchHeader = ({ getSearchValue, resetValue }) => {
  const [memberCreatedTimeStart, setMemberCreatedTimeStart] = useState('')
  const [memberCreatedTimeEnd, setMemberCreatedTimeEnd] = useState('')
  const formRef = useRef()
  const dateChange = (arg) => {
    setMemberCreatedTimeStart(getDateTime3(arg[0]))
    setMemberCreatedTimeEnd(getDateTime3(arg[1]))
  }
  const formSubmit = value => {
    if (value.time && value.time.length) {
      value.createStartTime = memberCreatedTimeStart + ' 00:00:00'
      value.createEndTime = memberCreatedTimeEnd + ' 23:59:59'
    }
    delete (value.time)
    _.forIn(value, (v, k) => {
      if (!v) {
        delete (value[k])
      }
    })
    getSearchValue(value)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      time: []
    })
    resetValue()
  };
  return (
    <div className="p-search-box service-list-sarch">
      <Form ref={formRef} onFinish={formSubmit} layout="inline">
        <Form.Item name={"time"} label="举报时间">
          <RangePicker onChange={dateChange} />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

class List extends React.Component {
  state = {
    columns: [
      {
        title: "举报用户",
        dataIndex: "applyMemberName",
        key: "applyMemberName",
      },
      {
        title: "举报时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "被举报用户",
        dataIndex: "nickName",
        key: "nickName",
      },
      {
        title: "举报原因",
        dataIndex: "complaintReason",
        key: "complaintReason",
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['report:user:detail']}  onClick={() => this.props.history.push(`/users/details/${render.memberId}`)}>用户详情</TheButton>
              <TheButton haspermi={['report:user:freeze']} onClick={() => this.openDialog("account", render.memberId, render.complaintId)}>
                冻结账号
              </TheButton>
              <TheButton haspermi={['report:user:banned']} onClick={() => this.openDialog("release", render.memberId, render.complaintId)}>
                封禁发布
              </TheButton>
              <TheButton haspermi={['report:user:remove']} onClick={() => this.removeConfirm(render.complaintId, render.memberId)}>
                移出
              </TheButton>
            </div>
          );
        },
      },
    ],
    data: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    accountVisible: false,
    releaseVisible: false,
    searchValue: {},
    type: '',
    memberId: ''
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { searchValue, pageData } = this.state;
    let data = await apiGetUserList({ ...searchValue, ...pageData })
    if (data.code === 0 && data) {
      this.setState({
        data: data.data,
        pageData: {
          pageNo: data.pageNo,
          pageSize: data.pageSize
        },
        total: data.totalCount,
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({ pageData: { pageNo, pageSize } }, () => {
      this.getData()
    })
  };
  openAdd = () => {
    this.setState({ visible: true });
  };
  dialogCancel = () => {
    this.setState({ visible: false });
  };
  openDialog = (value, memberId, complaintId) => {
    this.setState({ [`${value}Visible`]: true, type: value, memberId, complaintId });
  };
  dialogClose = () => {
    this.setState({ accountVisible: false, releaseVisible: false });
  };
  getSearchValue = value => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  resetValue = () => {
    this.setState({ searchValue: {}, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  removeConfirm = (complaintId, memberId) => {
    React.$confirm({
      title: '您确定将此用户从举报列表中移出吗？',
      onOk: async () => {
        let res = await apiGetUserRemove({ complaintId, memberId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '移出成功'
          })
          this.getData()
        }
      }
    })
  }
  render() {
    const { columns, data, pageData, total, accountVisible, releaseVisible, type, memberId, complaintId } =
      this.state;
    return (
      <div className="p-layout-box commodity-examine">
        <SearchHeader openAdd={this.openAdd} getSearchValue={this.getSearchValue} resetValue={this.resetValue} />
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={columns}
            dataSource={data}
          />
          <ThePagination
            pageNo={pageData.pageNo}
            pageSize={pageData.pageSize}
            total={total}
            pageChange={this.pageChange}
          />
          <TheDialog
            title={
              <div>
                <ExclamationCircleFilled
                  style={{ color: "#FAAD14", marginRight: 10 }}
                />
                冻结账号
              </div>
            }
            visible={accountVisible}
            handleCancel={this.dialogClose}
            footer={null}
            width={400}
          >
            <Banned complaintId={complaintId} dialogClose={this.dialogClose} type={type} reload={this.getData} memberId={memberId} />
          </TheDialog>
          <TheDialog
            title={
              <div>
                <ExclamationCircleFilled
                  style={{ color: "#FAAD14", marginRight: 10 }}
                />
                封禁发布
              </div>
            }
            visible={releaseVisible}
            handleCancel={this.dialogClose}
            footer={null}
            width={400}
          >
            <Banned complaintId={complaintId} dialogClose={this.dialogClose} type={type} reload={this.getData} memberId={memberId} />
          </TheDialog>
        </div>
      </div>
    );
  }
}

export default List;
